<template>
  <div>
    <el-table 
      :data="financeArray" 
      border 
      class="w-full bg-gray-100 text-gray-800 font-normal text-base text-center"
    >
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="realName" label="姓名" width="180" align="center"></el-table-column>
      <el-table-column prop="money" label="申请金额" align="center"></el-table-column>
      <el-table-column prop="rate" label="利率" align="center"></el-table-column>
      <el-table-column prop="repayment" label="还款时间" align="center"></el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag type="warning" v-show="scope.row.status === 0">申请中</el-tag>
          <el-tag type="danger" v-show="scope.row.status === 1">驳回</el-tag>
          <el-tag type="success" v-show="scope.row.status === 2">通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="combinationName" label="组合贷款人" align="center"></el-table-column>
      <el-table-column label="创建时间" align="center" width="140px">
        <template #default="scope">
          <span>{{ formatTimer(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" width="140px">
        <template #default="scope">
          <span>{{ formatTimer(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <span class="text-green-500 hover:text-green-800 hover:underline cursor-pointer" @click="toDetail(scope.row)">
            详情
          </span>
        </template>
      </el-table-column>
    </el-table>
          <!-- 分页 -->
  <div class="flex justify-center items-center mt-8 text-sm">
    <Pagination
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @update:current-page="setCurrentPage"
      @update:page-size="setPageSize"
      @page-change="loadData"
      class="mt-6"
    />
  </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { apiClient } from "../api/apiService.js";
import { ElMessage } from 'element-plus';
import { useStore } from "vuex";
import Pagination from "../components/Pagination.vue";

const store = useStore();
const router = useRouter();

const searchValue = ref("")
// 分页状态
const pagination = ref({
  currentPage: 1,
  pageSize: 20,
  total: 0,
});
const financeArray = ref([])
// 更新当前页
const setCurrentPage = (page) => {
  pagination.value.currentPage = page;
};

// 更新每页条数
const setPageSize = (size) => {
  pagination.value.pageSize = size;
};

const formatTimer = (value) => {
  let date = new Date(value)
  let y = date.getFullYear()
  let MM = date.getMonth() + 1
  MM = MM < 10 ? "0" + MM : MM
  let d = date.getDate()
  d = d < 10 ? "0" + d : d
  let h = date.getHours()
  h = h < 10 ? "0" + h : h
  let m = date.getMinutes()
  m = m < 10 ? "0" + m : m
  let s = date.getSeconds()
  s = s < 10 ? "0" + s : s
  return y + "-" + MM + "-" + d + " " + h + ":" + m
}


const loadData = ({ page }) => {
  selectByBankId({ page }).then(res => {
    financeArray.value = res.data.list
    pagination.value.total = res.data.total
  }).catch(err => {
    console.log(err)
  })
}

const toDetail = (row) => {
  router.push(`/financeDetail?FianId=${row.financeId}`)

}

onMounted(() => {
  loadData({
    page: pagination.value.currentPage,
  })
})


// 根据银行id查询融资一览
const selectByBankId = async({ page }) =>{
    const response = await apiClient.get(`finance/selectByBankId/${page}`, {
      headers: {
        Authorization: window.localStorage.token,
      },
    });
    return response;
}
</script>
